<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Page Title | Yoursite.com</title>

	<meta name="keywords" content="keyword phrase 1, keyword phrase 2" />
	<meta name="description" content="inHarmony is a perfect corporate html template." />
	
	<link rel="Shortcut Icon" type="image/ico" href="imgs/favicon.ico" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
	<!-- CSS _____________________________________________-->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/magnificpopup.css" >
	<link rel="stylesheet" href="css/font-awesome.min.css">
	
	<link href="css/master.css" rel="stylesheet">
	<link href="css/colors-classic.css" rel="stylesheet">   <!-- The color scheme -->
	
	<!-- Javascripts _____________________________________________-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
		<!-- include image popups -->
		<script src="js/jquery.magnific-popup.min.js"></script> 
		<!-- include mobile menu -->
		<script src="js/jquery.mobilemenu.js"></script> 
		<!-- include custom script -->
		<script src="js/scripts.js"></script>
	
	<!-- Fixing Internet Explorer ______________________________________-->
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" />
	<![endif]-->

	<!--[if IE 7]>
		<link rel="stylesheet" href="css/ie7.css" />
		<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
	<![endif]-->
</head> 

<body class="page full">

<div id="wrapperbox">

	<!-- HEADER _____________________________________________-->
	<header role="banner">
		<div class="wrapper">
			<!-- Logo ______________________________________-->
			<div id="logo">
				<h1>
					<a href="/" rel="home"><img src="imgs/logo.gif" alt="inHarmony Logo" /></a>
					<a href="/" rel="home">inHarmony<span class="blue">.</span></a> <br />
					<span class="subtitle">Just another HTML template</span>
				</h1>
			</div>
			
			<!-- Address Microdata ______________________________________-->
			<div id="address-block" itemscope itemtype="http://schema.org/Organization"> 
			   <span itemprop="name" class="hidden">inHarmony Organization</span> 
			   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
					
				  <span itemprop="streetAddress">2939 4th Ave W</span>,
				  <span itemprop="addressLocality">Vancouver</span>,
				  <span itemprop="postalCode">BC V6K 1R3</span>
			   </div>
			   <span itemprop="telephone"><i class="icon-mobile-phone"></i> <strong>123-456-9999</strong></span> 
			   <a href="mailto:info@yourcompany.com" itemprop="email"><i class="icon-envelope"></i> info@the-company.com</a>
			</div>	
			
			<!-- Social icons ______________________________________-->
			<div id="social-block">
				<ul>
					<li><a href="#" target="_blank" title="Twitter"><i class="icon-twitter"></i></a></li>
					<li><a href="#" target="_blank" title="Facebook"><i class="icon-facebook"></i></a></li>
					<li><a href="#" target="_blank" title="Linkedin"><i class="icon-linkedin"></i></a></li>
					<li><a href="#" target="_blank" title="Pinterest"><i class="icon-pinterest"></i></a></li>
					<li><a href="#" target="_blank" title="Google Plus"><i class="icon-google-plus"></i></a></li>
					<!-- 	<li><a href="#" target="_blank" title="Youtube"><i class="icon-youtube"></i></a></li>
					<li><a href="#" target="_blank" title="Dribbble"><i class="icon-dribbble"></i></a></li>
					<li><a href="#" target="_blank" title="Flickr"><i class="icon-flickr"></i></a></li>
					<li><a href="#" target="_blank" title="Tumblr"><i class="icon-tumblr"></i></a></li>
					<li><a href="#" target="_blank" title="Skype"><i class="icon-skype"></i></a></li> -->
				</ul>
			</div>
		</div>  <!-- END .wrapper -->
		
		<!-- Main menu ______________________________________-->
		<nav id="mainmenu" role="navigation">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="#">Styles</a>
					<ul class="sub-menu" id="change-style">
						<li><a href="#" id="classic">Classic</a></li>
						<li><a href="#" id="eco-earth">Eco Earth</a></li>
						<li><a href="#" id="silver-grey">Silver Grey</a></li>
						<li><a href="#" id="passion-red">Passion Red</a></li>
						<li><a href="#" id="golden">Golden</a></li>
						<li><a href="#" id="deep-blue">Deep Blue</a></li>	
					</ul>
				</li>
				<li><a href="elements.html">Pages</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">About Us</a></li>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="team.html">Team</a></li>
						<li><a href="pricing.html">Pricing</a></li>
						<li><a href="testimonials.html">Testimonials</a></li>
						<li><a href="faqs.html">FAQs</a></li>
						<li><a href="404.html">404</a></li>
					</ul>
				</li>
				<li><a href="#" class="active">Media</a>
					<ul class="sub-menu">
						<li><a href="portfolio.html">Portfolio</a>
							<ul class="sub-menu">
								<li><a href="portfolio.html">Portfolio Small</a></li>
								<li><a href="portfolio-medium.html">Portfolio Medium</a></li>
								<li><a href="portfolio-large.html">Portfolio Large</a></li>
							</ul>
						</li>
						<li><a href="portfolio-single.html">Portfolio Single</a></li>
						<li><a href="documentation.html" class="active">Documentation</a></li>
					</ul>
				</li>
				<li><a href="#">Layouts</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">Left Sidebar</a></li>
						<li><a href="blog-post.html">Right Sidebar</a></li>
						<li><a href="team.html">Full Width</a></li>
					</ul>
				</li>
				
				<li><a href="blog.html">Blog</a>
					<ul class="sub-menu">
						<li><a href="blog-post.html">Blog Post</a></li>
					</ul>
				</li>
				<li><a href="contact.html">Contact</a></li>
			</ul>		

			<!-- Search box ______________________________________-->
			<div id="sitesearch">
				<i class="icon-search"></i>
			</div>
			<div id="search-results">
				<script>
				  (function() {
					var cx = '017683756184911932766:rvnzs1j9m1g';
					var gcse = document.createElement('script');
					gcse.type = 'text/javascript';
					gcse.async = true;
					gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
						'//www.google.com/cse/cse.js?cx=' + cx;
					var s = document.getElementsByTagName('script')[0];
					s.parentNode.insertBefore(gcse, s);
				  })();
				</script>
				<div id="search-box">
					<div class="gcse-search"></div>
				</div>
			</div>
			
		</nav> <!-- END #mainmenu -->		
	</header>
			
	<div class="wrapper">
		<div id="content" role="main">
			<!-- Heading _____________________________________________-->
			<h1>Documentation</h1>
			
			<!-- Breadcrumbs _____________________________________________-->
			<p itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="breadcrumbs"><a href="/" rel="home" itemprop="url"><span itemprop="title">Home</span></a> <i class="icon-chevron-right"></i> Documentation</p>
			<hr />
			
			<!-- WYSIWYG Content _____________________________________________-->
			<p class="big"><strong>Welcome</strong> to the inHarmony documentation. This guide was created for everyone that wants to create their own website using this template and is not that familiar with coding. All steps are thoroughly explained, so that using this template becomes as easy as it can get!</p>
	
			<br />
			<div class="vertical-tabs tabs-wrapper">
				<ul class="tabs">
				   	<li><a href="#" id="tab1">Getting started</a></li>
				   	<li><a href="#" id="tab2">Using HTML elements &amp; troubleshooting bad styling</a></li>
				    	<li><a href="#" id="tab3">How to change the logo</a></li>
					<li><a href="#" id="tab4">Change the address and social links</a></li>
					<li><a href="#" id="tab5">Setting up Google Custom Search &amp; Google Analytics</a></li>
					<li><a href="#" id="tab6">Setting up your homepage: slider</a></li>
					<li><a href="#" id="tab7">Setting up your homepage: content and widgets</a></li>
					<li><a href="#" id="tab8">Columns in footer</a></li>
					<li><a href="#" id="tab9">Setting up layouts and sidebar for pages</a></li>
					<li><a href="#" id="tab10">Setting up portfolio</a></li>
					<li><a href="#" id="tab11">Setting up blog pages</a></li>
					<li><a href="#" id="tab12">Setting up contact page, map and contact form</a></li>
					<li><a href="#" id="tab13">Creating your own color scheme</a></li>
				</ul>
				<div class="tab tab1">
				 	<h3>Get Started with the inHarmony Template</h3>
				 	<p>This template is very easy to use, it has comments all over its files and clearly visible and understandable element structure. First, keep the copy of the template in a folder and copy the whole folder to your server or test folder on your computer. Make sure the index.html file is in the root of your server. This template uses <strong>PHP for a contact form</strong>, so make sure that your server has PHP installed and enabled for you. Other than that, it is pure HTML / CSS / Javascript. 
					</p>
				</div>
				<div class="tab tab2">
				 	<h3>Using HTML elements</h3>
					<p>See the elements structure in this image: <img src="" alt="" class="" />
					</p>
					<p>Every page in this template has HTML elements that you can use anywhere. When copying, make sure, you kept all the element classes and/or IDs (.pricing for pricing table for example), otherwise the styling of your element won't look right.</p>
					<p>If something goes wrong, first step is to copy the whole code of your newly created html page and paste it <a href="http://validator.w3.org/#validate_by_input" target="_blank">in the validator</a>. This will tell you, wheter you have an unclosed tag somewhere. If everything is OK from the validator but you still experience bad styling on your element, compare it tag by tag, class by class, with the original code.</p>
					<p class="notice success"><strong>Tip:</strong> Use Google Chrome browser, right-click with your mouse the bad element and select "Inspect Element". This opens the HTML and CSS doctor in the browser, which can tremendously help you in searching for a cause of trouble.</p>
				</div>
				<div class="tab tab3">
				 	<h3>How to change the logo</h3>
				 	<p>The logo of the template has an image, text headline and sub-headline. The image logo should be 130px in height maximum. Replace the <strong>logo.gif</strong> file in /imgs folder. 
					</p>
					<p>If you want to change height of the logo, open master.css file in /css folder, locate line for #logo and change the height in pixels.</p>
					<p>If you don't want the text headlines, remove them from html:</p>
					<div class="greybox">
					<pre>
&lt;div id="logo"&gt;
	&lt;h1&gt;
		&lt;a href="/" rel="home"&gt;&lt;img src="imgs/logo.gif" alt="inHarmony Logo" /&gt;&lt;/a&gt;
		REMOVE FROM HERE
		&lt;a href="/" rel="home"&gt;inHarmony&lt;span class="blue"&gt;.&lt;/span&gt;&lt;/a&gt; &lt;br /&gt;
		&lt;span class="subtitle"&gt;Just another HTML template&lt;/span&gt;
		TO HERE
	&lt;/h1&gt;
&lt;/div&gt;</pre>
					</div>
					<p>The <strong class="green">&lt;span class="blue"&gt;.&lt;/span&gt;</strong> is just a design touch, you can remove it too if you like.</p>
				</div>	
				<div class="tab tab4">
				 	<h3>Change the address and social links</h3>
				 	<p>The <strong class="green">#address-block</strong> in header is a microdata rich snippet, which helps your business to be better seen and previewed by search engines, especially Google, in search results. Fill out the fields of the address, don't forget the <strong class="green">mailto:</strong> parameter (or remove the a link for a span if you don't want the email address to be clickable).
					</p>
					<p>Below the address are the social links. The icons are Font Awesome icons and you have more of them to your disposal - they are commented, choose the ones useful for you. Fill out the href links to your social profiles, with <strong class="green">target="_blank"</strong>, it all opens in a new window.</p>
					<p>You can change the colors and size of the social icons in the master.css file. Locate <strong class="green">#social-block a i</strong>, </p>
				</div>
				<div class="tab tab5">
				 	<h3>Setting up Google Custom Search &amp; Google Analytics</h3>
				 	<p>You'll need a gmail account for all of this. For Google CSE Search, go to 
					<a href="https://www.google.com/cse/" target="_blank">https://www.google.com/cse/</a>, add new custom search, use the domain name of your website and <strong>save the ID</strong> (of your newly created custom search). Go to the .html file (all of them), locate this line and put the ID there:</p>
					<div class="greybox">
						<pre>var cx = '017683756184911932766:rvnzs1j9m1g';</pre>
					</div>
					<p>For Google Analytics, go to <a href="https://www.google.com/analytics/" target="_blank">https://www.google.com/analytics/</a>, set up the Analytics for your website and save its UX- number. Go to the .html file (all of them) at the bottom and put the number there:</p>
					<div class="greybox">
						<pre>_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);</pre>
					</div>
				</div>
				<div class="tab tab6">
				 	<h3>Setting up your homepage: slider</h3>
				 	<p>The <strong class="green">#slider</strong> is operated by a <a href="http://jquery.malsup.com/cycle/" target="_blank">jQuery Cycle Plugin by malsup</a>. Every <strong class="green">.slide</strong> has 3 layers: the background image layer (the main one), the semi-transparent image layer over it (the girl on the first slider for example) and the text box with paragraphs:</p>
					<ul>
						<li><span class="bold green">.slide-back</span> (jpg image)</li>
						<li><span class="bold green">.slide-image</span> (png image)</li>
						<li><span class="bold green">.slide-text</span> (paragraphs)</li>
					</ul>
					<p>You will need to have at least one jpg image (.slide-back) to have the slider functioning. This image should be <strong>1065 x 450 px</strong>. </p>
					<p>The image on top of the background image is a png image with transparency.</p>
					<p>The paragraphs in .slide-text are all animated. For best experience, have 4 of them at most.</p>
					<p class="notice success"><strong>Tip:</strong> If you want to have a button there, make sure the paragraph has an <em>inline</em> class, like so:</p>
					<div class="greybox"><pre>&lt;p class="inline"&gt;&lt;a href="#" class="button"&gt;Buy it&lt;/a&gt;&lt;/p&gt;</pre></div>
				 	<p>The script operating the cycle slider can be found at the bottom of index.html file. Here are some parameters you can change: </p>
					<ul class="">
						<li><strong class="green">fx</strong> - transition effect. Best is <em>fade</em>. Others can be <a href="http://jquery.malsup.com/cycle/browser.html" target="_blank">found here</a>.</li>
						<li><strong class="green">speed</strong> - how long does it take for the the background to fade out (in miliseconds)</li>
						<li><strong class="green">timeout</strong> - how long does the slide stays visible (in miliseconds)</li>
					</ul>
				 	<p>For professionals, here are <a href="http://jquery.malsup.com/cycle/options/" target="_blank">all options for the slider</a>. </p>
				 	<p>The subtle animation of paragraphs is handled in <em>before</em> and <em>after</em> functions.</p>
				 	<p>You can have as many slides as you wish.</p>
					<p class="notice error"><strong>Warning:</strong> If you only have one .slide, the plugin will not work and you'll see blank space.</p>
				</div>	
				<div class="tab tab7">
				 	<h3>Setting up your homepage: content and widgets</h3>
				 	<p>Homepage comprises of these content components:</p>
					<ul>
						<li><span class="bold green">#slider</span> (cycle slider)</li>
						<li><span class="bold green">#features</span> (6 icons)</li>
						<li><span class="bold green">#slogan</span> (grey box with text)</li>
						<li><span class="bold green">#latest-projects</span> (images in carousel)</li>
						<li><span class="bold green">#recent-news</span> (vertical carousel)</li>
						<li><span class="bold green">#testimonials</span> (quotes in a cycle)</li>
						<li><span class="bold green">#clients</span> (client logos in carousel)</li>
					</ul>
					<p>Plugins operating the components can be found at the bottom of index.html file:</p>
					<ul>
						<li><span class="bold green">#slider</span> (operated by Cycle)</li>
						<li><span class="bold green">#latest-projects</span> (operated by jCarousel)</li>
						<li><span class="bold green">#recent-news</span> (operated by jCarousel)</li>
						<li><span class="bold green">#testimonials</span> (ooperated by Cycle)</li>
						<li><span class="bold green">#clients</span> (operated by jCarousel)</li>
					</ul>
					<h4>Slider</h4>
					<p>This component is explained by detail in the previous section of this documentation.</p>
					<h4>Features - 6 icons</h4>
					<p>Every <strong class="green">.feature</strong> takes up 1/6 of the content width (16.67%). If you want to have less features, change the percentage in css/master.css (locate <em>.feature</em> line). Icons in the features are Font Awesome icons - take a look at <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">350+ Font Awesome icons</a> - you can have any icon there! Just change the class in the i tag:</p>
					<div class="greybox"><pre>&lt;i class="icon-ANYTHING"&gt;&lt;/i&gt;</pre></div>
					<p>You can control the color and size of the icons in the css file.</p>
					<h4>Slogan</h4>
					<p>Here you can have anything, it is just a grey box with centered text.</p>
					<h4>Latest Projects</h4>
					<p>This is a <a href="http://sorgalla.com/jcarousel/" target="_blank">jCarousel</a> carousel. It is composed by <strong class="green">.carousel4 li </strong> items, each having the popup image, headline and brief description. The popup is controlled with the <a href="http://dimsemenov.com/plugins/magnific-popup/‎" target="_blank">Magnific Popup plugin</a>. Every popup image is encapsulated in a link with a <strong class="green">.popup</strong> class. Here is the code:</p>
					<div class="greybox">
						<pre>&lt;a class="popup" href="LARGE IMAGE"&gt;&lt;img src="THUMBNAIL" alt="DESCRIPTION" /&gt;&lt;/a&gt;</pre>
					</div>
					<p>Each project is 264px wide. Make sure the thumbnail image is at least <strong>264px</strong> in width (ideally 480px in width, but the size can be anything). Also, the thumbnails should have the same height, otherwise you end up with an odd-looking carousel.</p>
					<p>If you choose to have <strong>a lot</strong> of portfolio pieces in the carousel, go to css/master.css file, locate <strong class="green">ul.carousel4</strong> line and make sure it's width is sufficient (right now it's 3000px, which is enough for 8 pieces).</p>
					<h4>Recent News</h4>
					<p>This component is operated by jCarousel, its orientation is vertical.</p>
					<p>In css/master.css file, this is styled as <strong class="green">.carousel-vert4</strong></p>
					<h4>Testimonials</h4>
					<p>This component (<strong class="green">#quotes</strong>) is operated similarly to the slider, by the Cycle plugin.</p>
					<p>In css/master.css file, this is styled as <strong class="green">.quote</strong></p>
					<h4>Clients</h4>
					<p>This component is operated by jCarousel, you can change the automatic movement timing (interval) in the script at the end of index.html file. </p>
					<p>In css/master.css file, this is styled as <strong class="green">.carousel7</strong></p>
					<p>The client logo image should have maximum width of 160px and maximum height of 150px.</p>
				</div>	
				<div class="tab tab8">
				 	<h3>Columns in footer</h3>
				 	<p>Each <strong class="green">.footerbox</strong> takes up 1/4 of content space. It's basically up to you what you put in it. The newsletter sign-up form is just an example, it is not functioning. If you're using Mailchimp for your subscriptions, I recommend <a href="http://kb.mailchimp.com/article/can-i-host-my-own-sign-up-forms" target="_blank">this article</a>.
					</p>
					<p>If you want to have a 3-column footer instead, go to css/master.css and locate line <em>.footerbox</em>. Change the width to 30%.</p>
					<p>Make sure that the last .footerbox has class <strong class="green">.last</strong>:</p>
					<div class="greybox">
						<pre>&lt;div class="footerbox last"&gt;</pre>
					</div>
				</div>
				<div class="tab tab9">
				 	<h3>Setting up layouts and sidebar for pages</h3>
				 	<p>Page layout are easy. You have 3 of them to your disposal (each are represented as a <strong>body class</strong>):
					</p>
					<ul>
						<li><strong class="green">.full</strong> - page with no sidebar</li>
						<li><strong class="green">.right-sidebar</strong> - content on the left, sidebar floating on the right</li>
						<li><strong class="green">.left-sidebar</strong> - content on the right, sidebar floating on the left</li>
					</ul>
					<div class="greybox">
						<pre>
&lt;body class="left-sidebar"&gt;
	&lt;div id="content"&gt; CONTENT &lt;/div&gt;
	&lt;aside id="sidebar"&gt; SIDEBAR &lt;/aside&gt;
&lt;/body&gt;
						</pre>
					</div>
					<p>Each component in the sidebar is encapsulated in <strong class="green">.widget</strong> element.
					</p>
				</div>
				<div class="tab tab10">
				 	<h3>Setting up portfolio</h3>
				 	<p>Portfolio is operated by the <a href="http://mixitup.io/‎" target="_blank">Mixitup plugin</a>, which handles its filtering. 
					</p>
					<p>Code nessessery to create a category menu:</p>
					<div class="greybox">
						<pre>
&lt;ul id="menu-portfolio-items" class="tags"&gt;
	&lt;li&gt;&lt;a href="#" data-filter="all" class="active"&gt;All&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#" data-filter="cat-1"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
					</pre>
					</div>
					<p>The <strong class="green">.gallery</strong> has many <strong class="green">.gallery-item</strong>s and these gallery items sit in <strong class="green">.gallery-row</strong>s.</p>
					<p>If you want 4-column gallery, make sure that each .gallery-item has class <strong class="green">.col-4</strong> and that there are exactly 4 gallery items in each gallery row.</p>
					<p>Similarly, 3-column gallery will have gallery items with class <strong class="green">.col-3</strong> and there will be exactly 3 gallery items in each gallery row.</p>
					<p>Each gallery item has <strong>categories as classes</strong> for filtering, make sure they correspond with the <em>data-filter</em> attributes in the category menu.</p>
					<div class="greybox">
						<pre>
&lt;div class="gallery"&gt;
	&lt;div class="gallery-row"&gt;
		&lt;dl class="gallery-item col-NUMBER CATEGORY"&gt;
			&lt;dt class="gallery-icon"&gt;
				&lt;a href="LARGE IMAGE"&gt;&lt;img src="THUMBNAIL IMAGE" alt="" /&gt;&lt;/a&gt;
			&lt;/dt&gt;
			&lt;dd class="gallery-caption"&gt;
				&lt;strong&gt;HEADING&lt;/strong&gt; 
				&lt;span class="small"&gt;DESCRIPTION OR CATEGORIES&lt;/span&gt;
			&lt;/dd&gt;
		&lt;/dl&gt;
	&lt;/div&gt;
&lt;/div&gt;
					</pre>
					</div>
					<p>Make sure the thumbnail images have the same width and height, ideally 480px in width.</p>
				</div>	
				<div class="tab tab11">
				 	<h3>Setting up blog pages</h3>
				 	<p>Blog page consists of:
					</p>
					<ul>
						<li><strong class="green">article</strong> - one blog post</li>
						<li><strong class="green">.entry-header</strong>
							<ul>
								<li><strong class="green">.post-thumb</strong> - wide thumbnail</li>
								<li><strong class="green">.entry-byline</strong> - meta info with author vcard</li>
							</ul>
						</li>
						<li><strong class="green">.entry-summary</strong> - excerpt
							<ul>
								<li><strong class="green">h1</strong> - heading</li>
								<li><strong class="green">p</strong> - excerpt</li>
								<li><strong class="green">.entry-footer</strong> - meta info</li>
							</ul>
						</li>
					</ul>
					<p>Choose the layout of the blog page by adding a <em>.left-sidebar</em> or <em>.right-sidebar</em> class to the body tag.</p>
					<p class="notice success"><strong>Tip:</strong> In the author's vcard, use your google plus account link - that way your page will appear in search results like this: <img src="imgs/result.gif" alt="Google search result" /></p>
				</div>	
				<div class="tab tab12">
				 	<h3>Setting up contact page, map and contact form</h3>
				 	<p>Open the contact.html file and go to the bottom, where the map script is. Here, fill the address <strong>twice</strong> (on two lines). Make sure that <a href="http://maps.google.com" target="_blank">maps.google.com</a> recognizes this address. You can play with the <em>zoom</em> property to get a perfect map granularity.
					</p>
					<p>All files needed for the contact form to work are in the /contact folder. Open the contact.php file and <strong>change the email address</strong> to yours. You can try the contact form, but first it has to be uploaded on a server with php.</p>
				</div>
				<div class="tab tab13">
				 	<h3>Creating your own color scheme</h3>
				 	<p>Each html file uses a colors-classic.css color scheme. There are more to your disposal in the /css folder. Take any you like the most and copy it. Keep it in the /css folder. Include the link to your newly created color scheme in the &lt;head&gt; section of your html files. 
					</p>
					<p>The color scheme css file has only a couple colors. If you take a closer look, each section divided by comments has one color. So if you want to change blue for red, make sure you change the color hex code in the whole section.</p>
					<p>For a perfect color scheme with harmonious colors, I recommend <a href="http://colorschemedesigner.com/" target="_blank">colorschemedesigner.com</a>.</p>
				</div>
				
			</div> <!-- END .vertical-tabs -->	
			
			<!-- END of WYSIWYG content _____________________________________________-->
			
		</div> <!-- END .content -->	
			
		<div class="clear"></div>	  
		
	</div> <!-- END .wrapper -->
			
	<!-- Footer _____________________________________________-->
	<footer role="contentinfo" id="footer">
		<div class="wrapper">
			<div class="footerbox">
				<h3>About Us</h3>
				<p>We create awesome HTML and WP themes and templates for your great online presence. We also provide support if you get any issues on our items. Check it out!</p>
				<br />
				<p><a href="http://themeforest.net/user/Darinka?ref=Darinka" target="_blank" class="button">BUY THIS</a></p>
			</div> <!-- END .footerbox -->
		
			<div class="footerbox">
				<h3>Latest News</h3>
				<ul>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Single Clean Post</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Our Blog Revived!</a></h4>
						<p class="small"><strong>Aug 3</strong> / Darinka </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">New Site Out Tomorrow</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox">
				<h3>Events</h3>
				<ul>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Open Klasses</a></h4>
						<p class="small"><strong>Aug 3</strong> / Street Art 2013 </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Summer Party</a></h4>
						<p class="small"><strong>Aug 10</strong> / Best place to party! </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Charity Event</a></h4>
						<p class="small"><strong>Aug 12</strong> / Help find the cure!</p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox last">
				<h3>Our newsletter</h3>
				<form method="post" action="#">
					<p>Sign up now to receive weekly news about new products and great discounts!</p>
					<p><label for="email">Your e-mail address</label> <input type="text" id="email" value="" /></p>
					<p><button type="submit">Subscribe</button></p>
				</form>
			</div> <!-- END .footerbox -->
			<div class="clear"></div>

			<hr />
			<p class="left small">Copyright &copy; 2013 Your Company Name. <br />All rights reserved.</p>
			<ul class="footermenu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Styles</a></li>
				<li><a href="#">Pages</a></li>
				<li><a href="#">Media</a></li>
				<li><a href="#">Layouts</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul> <!-- END .footermenu -->
			<div class="clear"></div>
		</div>  <!-- END .wrapper -->
	</footer>
</div> <!-- END #wrapperbox -->
<br class="clear" />

	
	<!-- Your Google Analytics _____________________________________________-->
	<script type="text/javascript">
	
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })(); 
	
	</script>
</body>
</html>
